<%--
  Created by IntelliJ IDEA.
  User: 联想
  Date: 2020/3/14
  Time: 16:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en" >

<head>
    <meta charset="UTF-8">
    <title>教师重新设置密码</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat:400,700'>
    <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/teaLogin/css/style.css">


</head>
<script src="/js/jquery-3.3.1.js"></script>

<script>
    /*
        表单校验：
            1.用户名为学号：单词字符，长度9位
            2.密码：单词字符，长度8到20位
            3.email：邮件格式
            4.姓名：非空
            5.验证码：非空
     */

    //校验密码
    function checkPassword() {
        //1.获取密码值
        var password = $("#teacherPwd").val();
        //2.定义正则
        var reg_password = /^\w{4,20}$/;

        //3.判断，给出提示信息
        var flag = reg_password.test(password);
        if(flag){
            //密码合法
            $("#teacherPwd").css("border","2px solid green");
            $("#PwdSpan").css("color","green")
            $("#PwdSpan").html("符合要求");
        }else{
            //密码非法,加一个红色边框
            $("#teacherPwd").css("border","2px solid red");
            $("#PwdSpan").css("color","red")
            $("#PwdSpan").html("请输入8-20长度的密码");
        }

        return flag;
    }

    function checkPassword2() {
        //1.获取密码值
        var password = $("#teacherPwd").val();
        var password2 = $("#teacherPwd2").val();
        if(password2===''){
            $("#teacherPwd2").css("border","2px solid red");
            $("#Pwd2Span").css("color","red");
            $("#Pwd2Span").html("请确认密码");
            return false;
        }
        if(password === password2){
            //密码一致
            $("#teacherPwd2").css("border","2px solid green");
            return true;
        }else{
            //密码不一致
            $("#teacherPwd2").css("border","2px solid red");
            $("#Pwd2Span").css("color","red");
            $("#Pwd2Span").html("密码不一致");
            return false;
        }

    }


    $(function () {
        //当表单提交时，调用所有的校验方法
        $("#rePwdForm").submit(function(){
            //1.发送数据到服务器
            if(checkPassword() && checkPassword2()){
                //校验通过,发送ajax请求，提交表单的数据   username=zhangsan&password=123
                return true;
            }
            //2.不让页面跳转
            return false;
            //如果这个方法没有返回值，或者返回为true，则表单提交，如果返回为false，则表单不提交
        });

        //当某一个组件失去焦点是，调用对应的校验方法
        $("#teacherPwd").blur(checkPassword);
        $("#teacherPwd2").blur(checkPassword2);
    });


</script>

<body>
<div class="container">
    <div class="info">
        <h1>尊敬的${teacher.teacherName}老师(${teacher.teacherNo})重新设置您的密码</h1>
        <span>Made with <i class="fa fa-heart"></i> by HuangJiaLin</span>
    </div>
</div>
<div class="form">
    <div class="thumbnail"><img src="${pageContext.request.contextPath}/static/teaLogin/css/hat.svg"/></div>
    <form class="login-form" action="${pageContext.request.contextPath}/teacher/changePwd" method="get" id="rePwdForm">
        <input type="hidden" id="teacherCode" name="teacherCode" value="${teacher.teacherCode}">
        <input type="password" id="teacherPwd" name="teacherPwd" placeholder="密码"/><span id="PwdSpan"></span>
        <input type="password" id="teacherPwd2" name="teacherPwd2" placeholder="确认密码"/><span id="Pwd2Span"></span>
        <button  type="submit">submit</button>
        <span style="color:red;">${changeErrorMsg}</span>
        <span style="color:red;">${changeRightMsg}</span>
        <p class="message">Remembered the password ! <a href="${pageContext.request.contextPath}/teacher/goLogin">Return to home page</a></p>
    </form>
</div>
<script src='${pageContext.request.contextPath}/static/teaLogin/js/jquery.min.js'></script>
<script  src="${pageContext.request.contextPath}/static/teaLogin/js/index.js"></script>

</body>
</html>

